<template>
  <div>
    <el-button @click="exportData">导出</el-button>
    <div ref="main" style="height: 300px"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { exportExcel } from '../utils/excel'
let main = ref()
let props = defineProps(['list'])
let myChart = ref()
let info: any = {
  '1': '待审批',
  '2': '已同意',
  '3': '已拒绝'
}
let list = ref([]) //集合
watch(
  () => props.list,
  () => {
    list.value = props.list.map((item: any) => {
      return {
        value: item['count'],
        name: info[item['_id']]
      }
    })

    console.log(list)
    var option = myChart.value.getOption() //更新
    option.series[0].data = list.value
    myChart.value.setOption(option)
  }
)

onMounted(() => {
  var chartDom = main.value
  myChart.value = echarts.init(chartDom)
  var option

  option = {
    title: {
      text: '老师的审批的情况',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '次数',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  option && myChart.value.setOption(option)
})

let exportData = () => {
console.log(list.value);
  exportExcel(
    [
        {
        dataIndex: 'name',
        key: 'name',
        title:"类别"
      },
      {
        dataIndex: 'value',
        key: 'value',
        title:"次数"
      }
    
    ],
    list.value,
    '审批的情况.xlsx'
  )
}
</script>

<style></style>
